class RoomList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [''],
            roomTypeList: [''],
            roomTypeGroupList: [],
            values: {},
            operationRoom: {}
        };
        this.listCount = 0;
        this.pageCount = 1;
    }

    btnSubmit() {
        postJson("/RoomTypeCtrl/saveRoomType.x", this.state.values, (data) => {
            this.updateRoomTypeList(1, 10);
            parent.layer.msg('添加成功', {icon: 6});
            this.refs.createRoomTypeModal.close();
        });
    }

    /* custom functions */
    updateRoomTypeList(page, pageSize) {
        let params = {};
        params.page = this.pageCount = page;
        params.pageSize = pageSize;
        params.commCode = this.refs.buildingSelectList.commCode;
        params.buildingCode = this.refs.buildingSelectList.buildingCode;
        params.unitCode = this.refs.buildingSelectList.unitCode;
        params.floorCode = this.refs.buildingSelectList.floorCode;
        params.roomTypeId = this.refs.roomTypeId.value;
        postJson("/room/queryRoomPage.x", params, (data) => {
            console.log("data", data);
            this.listCount = data.data.size;
            this.setState({
                list: data.data.list
            });
        })
    }

    search() {
        this.updateRoomTypeList(1, 10);
    }

    assignsRoomType(room) {
        this.state.operationRoom = room;
        this.refs.selectRoomTypeModal.show();
    }

    assignsRoomTypeGroup() {
        this.refs.assignsRoomTypeGroupModal.show();
    }

    assignsSubmit() {
        let params = {};
        params.commCode = this.refs.buildingSelectListModal.commCode;
        params.buildingCode = this.refs.buildingSelectListModal.buildingCode;
        params.unitCode = this.refs.buildingSelectListModal.unitCode;
        params.floorCode = this.refs.buildingSelectListModal.floorCode;
        if (!params.commCode || !params.buildingCode || !params.unitCode || !params.floorCode) {
            parent.layer.msg('请选择完整的楼栋信息！', {icon: 7});
            return;
        }
        params.roomTypeGroupId = this.refs.roomTypeGroupSelect.value;
        if (!params.roomTypeGroupId) {
            parent.layer.msg('请选择户型组！', {icon: 7});
            return;
        }
        postJson("/room/assignsRoomTypeGroup.x", params, (data) => {
            parent.layer.msg('分配成功', {icon: 6});
        })
    }

    onCommChange() {
        postJson("/RoomTypeGroupCtrl/queryRoomTypesGroup.x", {
            commCode: this.refs.buildingSelectListModal.commCode
        }, (data) => {
            this.setState({
                roomTypeGroupList: data.data
            })
        })
    }

    selectRoomType(roomType) {
        postJson("/room/assignsRoomType.x", {
            roomId: this.state.operationRoom.id,
            roomTypeId: roomType.id
        }, () => {
            this.refs.selectRoomTypeModal.close();
            this.updateRoomTypeList(this.pageCount, 10);
        })
    }

    buildingCallback(comm) {
        this.updateRoomTypeList(1, 10);
        if (comm) {
            let params = {};
            params.commCode = this.refs.buildingSelectList.commCode;
            postJson("/RoomTypeCtrl/queryRoomTypes.x", params, (data) => {
                this.setState({
                    roomTypeList: data.data
                });
            })
        }
    }

    delete(id) {
        layui.layer.confirm('确定要删除该户型么?删除之后所有分配户型的房间都将没有户型，需要重新分配!', (index) => {
            let params = {};
            params.id = '' + id;
            postJson("/room/deleteRoomType.x", $.param(params), () => {
                this.refs.table.refresh();
                layui.layer.msg("戶型删除成功!");
            });
            layui.layer.close(index);
        });

    }

    construct(commCode) {
        document.location.href = '/AreaCtrl/genArea.x?commCode=' + commCode;
    }

    valueChange(name, value) {
        this.state.values[name] = value;
        this.setState({values: this.state.values});
    }

    endCallback() {
        this.setState({values: emptyObj(this.state.values, ["id"])});
    }

    roomTypeChange() {
        this.updateRoomTypeList(1, 10);
    }

    getRoomType(roomTypeId) {
        let view = [];
        for (let i in this.state.roomTypeList) {
            if (String(roomTypeId) === String(this.state.roomTypeList[i].id)) {
                view.push(<div>{this.state.roomTypeList[i].roomTypeName}</div>);
            }
        }
        return view;
    }

    render() {
        return (
            <Frame header="房间管理" headerBtns={
                <HeaderBtn onClick={() => this.assignsRoomTypeGroup()}><i className="fa fa-plus"/>&nbsp;
                    按组分配户型</HeaderBtn>
            }
            >
                <Form type="pane">
                    <Item>
                        <LayuiCommSelect
                            formLabelName="小区选择"
                            mask={['room']}
                            ref="buildingSelectList"
                            onChangeComm={(comm) => this.buildingCallback(comm)}
                            onChangeBuilding={() => this.buildingCallback()}
                            onChangeUnit={() => this.buildingCallback()}
                            onChangeFloor={() => this.buildingCallback()}/>
                        <Select ref="roomTypeId" onChange={(data) => this.roomTypeChange(data)}>
                            <option value="">户型选择</option>
                            {
                                this.state.roomTypeList.map((roomType) => {
                                    return <option value={roomType.id}>{roomType.roomTypeName}</option>
                                })
                            }
                        </Select>
                    </Item>
                    <Table ref="table" count={this.listCount}
                           pageOnClick={(page, pageSize) => this.updateRoomTypeList(page, pageSize)}>
                        <thead>
                        <tr>
                            <th>小区名</th>
                            <th>楼栋号</th>
                            <th>单元号</th>
                            <th>房号</th>
                            <th>户型</th>
                            <th>描述</th>
                            <th width="80">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.list.map((room) => {
                                return <tr>
                                    <td>{room.commName}</td>
                                    <td>{room.buildingAliasName}</td>
                                    <td>{room.unitAliasName}</td>
                                    <td>{room.floorCode + room.roomCode}</td>
                                    <td>{this.getRoomType(room.roomTypeId)}</td>
                                    <td>{room.description}</td>
                                    <td>
                                        <Button btnType="normal" size="xs"
                                                onClick={() => this.assignsRoomType(room)}>分配户型</Button>
                                    </td>
                                </tr>
                            })
                        }
                        </tbody>
                    </Table>
                    <Modal title="选择户型"
                           ref="selectRoomTypeModal"
                           area={['800px']}
                           endCallback={() => this.endCallback()}>
                        <Table ref="table"
                               pageOnClick={(page, pageSize) => this.updateRoomTypeList(page, pageSize)}>
                            <thead>
                            <tr>
                                <th>户型名</th>
                                <th>建筑面积</th>
                                <th>户型图</th>
                                <th>描述</th>
                                <th width="50">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.roomTypeList.map((roomType) => {
                                    return <tr>
                                        <td>{roomType.roomTypeName}</td>
                                        <td>{roomType.floorArea}</td>
                                        <td>{roomType.roomTypeUrl}</td>
                                        <td>{roomType.description}</td>
                                        <td>
                                            <Button btnType="normal" size="xs"
                                                    onClick={() => this.selectRoomType(roomType)}>选择</Button>
                                        </td>
                                    </tr>
                                })
                            }
                            </tbody>
                        </Table>
                    </Modal>

                    <Modal title="按户型组分配"
                           ref="assignsRoomTypeGroupModal"
                           area={['910px']}>
                        <Form size="sm">
                            <Item>
                                <LayuiCommSelect formLabelName="小区选择"
                                                 mask={['room']}
                                                 onChangeComm={(comm) => this.onCommChange(comm)}
                                                 ref="buildingSelectListModal"/>
                            </Item>
                            <Item>
                                <Label>选择户型组</Label>
                                <Select ref="roomTypeGroupSelect">
                                    <option value="">请选户型组</option>
                                    {this.state.roomTypeGroupList.map((typeGroup) => {
                                        return <option value={typeGroup.id}>{typeGroup.groupName}</option>
                                    })}
                                </Select>
                            </Item>
                            <Item>
                                <Button btnType="normal"
                                        formBtn={true}
                                        size="sm"
                                        onClick={() => this.assignsSubmit()}>确定分配</Button>
                            </Item>
                        </Form>
                    </Modal>
                </Form>
            </Frame>
        )
    }
}

ReactDOM.render(<RoomList/>, document.getElementById('root'));
